<template>
  <div>
    <el-form :inline="true" :model="param">
      <el-form-item label="分类名称">
        <el-input v-model="param.name" placeholder="分类名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="timeArr" @change="timeArrChange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="openDialog()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" row-key="Id" border style="width: 100%; " v-loading="tableLoading">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{(param.page - 1) * param.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="icon" align="center" label="分类图标">
        <template slot-scope="scope">
          　　　　<el-popover placement="top-start" trigger="hover">
            <a :href="scope.row.icon" target="_blank" title="查看最大化图片"><img :src="scope.row.icon" style="width: 300px;height: 300px" /></a>
            <img slot="reference" @click="$openImg(scope.row.icon)" :src="scope.row.icon" style="width: 50px;height: 50px; cursor:pointer" />
          </el-popover>
          　　</template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="分类名称">
      </el-table-column>
      <el-table-column prop="rank" align="center" label="分类排序">
      </el-table-column>
      <el-table-column prop="is_show" align="center" label="是否显示">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_show" @change="isShowChange(scope.row)" >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="apply_time" align="center" label="创建时间">
        <template slot-scope="scope">
          <div>
            {{scope.row.create_time}}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="delFun(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="param.page" :page-sizes="[10, 20, 50, 100]" :page-size="param.limit" :total="total" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <!-- 新增、编辑弹窗 -->
    <el-dialog :title="form.id?'编辑':'新增'" :visible.sync="dialogVisible" width="30%" :before-close="close">
      <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <uploadImg @updataImg="updataImg" :limit="1" :value="backImg" :dialogVisible="dialogVisible" :zi='true'></uploadImg>
        </el-form-item>
        <el-form-item label="是否显示" prop="is_show">
          <el-switch v-model="form.is_show"></el-switch>
        </el-form-item>
        <el-form-item label="排序" prop="rank">
          <el-input-number v-model="form.rank" :precision="0" :min="1" label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit" :laoding="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import affiliateMerchantApi from '@/api/affiliateMerchantApi.js'
import uploadImg from '@/views/modules/oss/oss-uploadImg2'
export default {
  components: {
    uploadImg
  },
  data () {
    return {
      param: {
        page: 1,
        limit: 10,
      },
      form: {
        rank: 1
      },
      dataList: [],
      total: 0,
      dialogVisible: false,
      backImg: [],
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'change' }],
        // icon: [{ required: true, message: '请上传图标', trigger: 'change' }],
        rank: [{ required: true, message: '请设置排序', trigger: 'change' }],
      },
      tableLoading: false,
      btnLoading: false,
      timeArr: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 打开弹窗
    openDialog (row = {}) {
      this.dialogVisible = true;
      if (row.id) {
        this.form.id = row.id;
        this.getDetail(row.id)
      }
    },
    // 获取分类详情
    getDetail (id) {
      affiliateMerchantApi.classifyInfo(id).then(res => {
        if (res && res.data.code == 200) {
          this.form = res.data.data;
          this.backImg = [this.form.icon]
        }
      })
    },
    // 关闭弹窗
    close () {
      this.form = {
        rank: 1
      };
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
    },
    // 修改 是否显示 开关
    isShowChange(row){
    affiliateMerchantApi.setClassifyShow(row.id).then(res=>{
      if(res&&res.data.code===200){
        this.$message.success('状态修改成功！')
      }
    }).finally(()=>{
      this.getList()
    })
    },
    delFun (id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        affiliateMerchantApi.classifyDelete(id).then(res => {
          if (res && res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          this.getList()
        })
      })
    },
    timeArrChange (e) {
      if (e && e.length == 2) {
        this.param.start_time = e[0];
        this.param.end_time = e[1];
      } else {
        this.param.start_time = '';
        this.param.end_time = '';
        this.timeArr = []
      }
    },
    getList () {
      this.tableLoading = true;
      affiliateMerchantApi.classifyPage(this.param).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.total = res.data.page.totalCount
        }
        this.tableLoading = false;
      })
    },
    // 提交
    submit () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let apiFun = affiliateMerchantApi.classifySave
          if (this.form.id) apiFun = affiliateMerchantApi.classifyUpdate;
          this.btnLoading = true
          apiFun(this.form).then(res => {
            if (res && res.data.code == 200) {
              if (this.form.id) {
                this.$message.success('编辑成功！')
              } else {
                this.$message.success('新增成功！')
              }
              this.getList()
              this.btnLoading = false;
              this.close()
            }
          })
        }
      })
      this.btnLoading = true;
    },
    //上传之后
    updataImg (e) {
      this.form.icon = e[0]
    },
    // 每页数
    sizeChangeHandle (val) {
      this.param.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.param.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.param.page = 1
      this.getList()
    },
    // 重置
    reset () {
      this.param = {
        page: 1,
        limit: 10,
      }
      this.timeArr = []
      this.getList()
    }
  }
}
</script>

<style>
</style>
